<template>
  <div class="order-card">
    <n-tabs v-model:value="tabValue" type="line" animated>
      <n-tab-pane name="expenditure" tab="支出记录">
        <expenditure-table />
      </n-tab-pane>
      <n-tab-pane name="revenue" tab="收入记录">
        <revenue-orders />
      </n-tab-pane>
    </n-tabs>
    <div class="more flex align-center justify-end">
      <div class="more-btn flex align-center" @click="handMore">
        <span>更多</span>
        <i class="esayIcon esayIcon-youjiantou"></i>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { defineAsyncComponent, ref } from 'vue'
import { NTabs, NTabPane } from 'naive-ui'
import { useRouter } from 'vue-router'
const ExpenditureTable = defineAsyncComponent(
  () => import('./ExpenditureTable.vue')
)
const RevenueOrders = defineAsyncComponent(() => import('./RevenueOrders.vue'))
const router: any = useRouter()
const tabValue = ref('expenditure')
const handMore = () => {
  if (tabValue.value === 'expenditure') {
    router.push('/my/download')
  } else {
    router.push('/my/income')
  }
}
</script>

<style scoped lang="scss">
.order-card {
  margin-top: 16px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #eeeeee;
  padding: 18px 24px;
  .more {
    margin-top: 32px;

    .more-btn {
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #f1423d;
      cursor: pointer;
      i {
        font-size: 14px;
        color: #f1423d;
      }
    }
  }
}
</style>
